<template>
  <div class="chart-container">
    <div :id="'barChart' + id" class="chart"></div>
    <div class="base-image"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
const props = defineProps({
  id: {
    type: String,
    default: '1',
  },
})
let chartDom
let myChart
const option = ref({
  title: {
    text: '柱状图示例',
  },
  tooltip: {},
  xAxis: {
    data: ['材料', '燃料', '人工成本', '电力', '折旧', '安全费', '修理费', '其他'],
  },
  yAxis: [
    { type: 'value', name: '百分比' },
    { type: 'value', name: '数量' },
  ],
  series: [
    {
      name: '系列1',
      type: 'bar',
      data: [20, 50, 30, 40, 60, 70, 50, 30], //指定y轴
      itemStyle: { color: '#4A90E2' },
      yAxisIndex: 0, // 绑定到第一个y轴
    },
    {
      name: '系列2',
      type: 'bar',
      data: [30, 40, 20, 50, 70, 60, 40, 20],
      itemStyle: { color: '#50E3C2' },
      yAxisIndex: 0, // 绑定到第一个y轴
    },
    {
      name: '系列3',
      type: 'bar',
      data: [40, 30, 50, 20, 60, 50, 30, 40],
      itemStyle: { color: '#B8E986' },
      yAxisIndex: 1, // 绑定到第二个y轴
    },
    {
      name: '系列4',
      type: 'bar',
      data: [50, 20, 40, 30, 50, 40, 20, 50],
      itemStyle: { color: '#F5A623' },
      yAxisIndex: 1, // 绑定到第二个y轴
    },
  ],
})
const initChart = () => {
  chartDom = document.getElementById('barChart' + props.id)
  myChart = echarts.init(chartDom)
  option.value && myChart.setOption(option.value)
}

onMounted(() => {
  initChart()
})
</script>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  width: 800px;
  height: 600px;

  .chart {
    width: 100%;
    height: 100%;
  }

  .base-image {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px; // 根据需要调整
    background-image: url('@/assets/images/evaluate-box.png');
    background-size: cover;
  }
}
</style>
